<template>
  <Dialog
    :model-value="userDialogVisible"
    title="用户选择"
    width="1200"
    v-if="userDialogVisible"
    @close="$emit('close')"
  >
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <!-- 搜索 -->
        <ContentWrap>
          <el-form
            class="-mb-15px"
            :model="queryParams"
            ref="queryFormRef"
            :inline="true"
            label-width="88px"
          >
            <el-form-item label="员工编号" prop="username">
              <ns-input
                v-model="queryParams.username"
                placeholder="请输入员工编号"
                clearable
                @keyup.enter="handleQuery"
                class="!w-240px"
              />
            </el-form-item>
            <el-form-item label="员工姓名" prop="nickname">
              <ns-input
                v-model="queryParams.nickname"
                placeholder="请输入员工姓名"
                clearable
                @keyup.enter="handleQuery"
                class="!w-240px"
              />
            </el-form-item>
            <el-form-item label="手机号码" prop="mobile">
              <ns-input
                v-model="queryParams.mobile"
                placeholder="请输入手机号码"
                clearable
                @keyup.enter="handleQuery"
                class="!w-240px"
              />
            </el-form-item>
            <el-form-item label="归属机构:" prop="deptId">
              <el-cascader
                ref="deptCascader"
                v-model="queryParams.deptId"
                placeholder="请选择归属机构"
                :props="cascaderProps"
                :options="deptList"
                filterable
                clearable
                :filter-method="sysFilterMethod"
                class="!w-240px"
              />
            </el-form-item>
            <el-form-item label="归属系统:" prop="sysId">
              <el-cascader
                ref="systemCascader"
                v-model="queryParams.sysId"
                placeholder="请选择归属系统"
                :props="systemCascaderProps"
                :options="systemList"
                filterable
                clearable
                :filter-method="sysFilterMethod"
                class="!w-240px"
              />
            </el-form-item>
            <el-form-item>
              <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
              <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
            </el-form-item>
          </el-form>
        </ContentWrap>
        <ContentWrap>
          <AsyncTable
            v-loading="loading"
            ref="tableRef"
            :columns="tableColumns"
            :fetchData="fetchData"
            @selection-change="selectionChange"
            :checkBackSelect="formIds"
          />
        </ContentWrap>
      </el-col>
    </el-row>
    <!-- 操作按钮 -->
    <template #footer>
      <el-button type="primary" @click="submit">确 定</el-button>
      <el-button @click="$emit('close')">取 消</el-button>
    </template>
  </Dialog>
</template>

<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { getSimpleDeptList } from '@/api/system/dept'
import { dateFormatter } from '@/utils/formatTime'
import { sysFilterMethod } from '@/utils/selectFilter'
import { getSimpleSystemList } from '@/api/asset/taskManage'
import { handleTree } from '@/utils/tree'
import * as UserApi from '@/api/system/user'
import DeptTree from '@/views/system/user/DeptTree.vue'
import { on } from 'events'

defineOptions({ name: 'SystemUser' })
const props = defineProps({
  userDialogVisible: { type: Boolean, default: false },
  checkIds: { type: Array, default: () => [] }
})
const tableRef = ref()
const systemList = ref([])
const deptTree = ref()
const loading = ref(false) // 列表的加载中
const deptList = ref([])
const tableColumns = ref([
  { type: 'selection', width: 42, 'reserve-selection': true },
  {
    label: '员工编号',
    prop: 'username',
    'show-overflow-tooltip': true
  },
  {
    label: '员工姓名',
    prop: 'nickname',
    width: '130',
    'show-overflow-tooltip': true
  },
  {
    label: '手机号码',
    prop: 'mobile',
    width: '120',
    'show-overflow-tooltip': true
  },
  {
    label: '归属机构',
    prop: 'deptName',
    'show-overflow-tooltip': true
  },
  {
    label: '归属系统',
    prop: 'sysName',
    'show-overflow-tooltip': true
  }
])
const queryParams = reactive({
  username: undefined,
  mobile: undefined,
  status: undefined,
  deptId: undefined,
  sysId: undefined,
  createTime: [],
  nickname: undefined
})
const fetchData = async ({ page, pageSize }) => {
  loading.value = true
  const { count, data } = await UserApi.getUserPage({ ...queryParams, page, pageSize, status: 0 })
  loading.value = false
  return { data, count }
}
async function getDeptList() {
  const data = await getSimpleDeptList()
  deptList.value = data
}
async function getSystemList() {
  const data = await getSimpleSystemList()
  systemList.value = handleTree(data, 'id', 'pid')
}
const queryFormRef = ref() // 搜索的表单

const systemCascaderProps = reactive({
  checkStrictly: true,
  label: 'value',
  value: 'id',
  children: 'children',
  emitPath: false
})
const cascaderProps = reactive({
  checkStrictly: true,
  label: 'name',
  value: 'id',
  children: 'children',
  emitPath: false // 用于 cascader 组件：在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
})

const formIds = ref([])

/** 搜索按钮操作 */
const handleQuery = () => {
  tableRef.value?.resetPage()
  tableRef.value?.fetchData()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.deptId = undefined
  queryFormRef.value?.resetFields()
  deptTree.value?.deptNodeChange()
  handleQuery()
}

const ids = ref([])
const selectionChange = (e) => {
  console.log('ids', ids.value, e)
  ids.value = e.map((item) => item.id)
}

const emit = defineEmits(['success', 'close'])
const submit = () => {
  emit('success', ids.value)
}
onMounted(() => {
  formIds.value = props.checkIds.map((item) => {
    return { id: item }
  })
  getDeptList()
  getSystemList()
})
</script>
